<template>
  <el-drawer
      :title="title"
      :visible.sync="dialogVisible"
      :size="700"
      @close="close"
    >
    <div class="box-card">
      <el-form ref="elForm" :rules="rules" :model="rulesInfo" label-width="80px">
        <el-form-item label="积分规则" prop="detail">
          <editor v-model="rulesInfo.detail" :init="editorInit" />
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button @click="close" size="medium">取消</el-button>
      <el-button type="primary" @click="handelConfirm" size="medium">确定</el-button>
    </div>
  </el-drawer>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
import { jfgzSave, jfgzUpdate } from '@/api/jfgz'
import { uploadImg } from '@/api/files'
export default {
  name: 'NewsArticle',
  components: {
    Editor
  },
  data () {
    return {
      dialogVisible: false,
      title: '新增积分规则',
      rulesInfo: {
        detail: '', // 积分规则内容
        status: true
      },
      isEdit: false,
      rules: {
        detail: [{
          required: true,
          message: '请输入积分规则',
          trigger: 'blur'
        }]
      },
      editorInit: {
        language: 'zh_CN',
        height: 500,
        convert_urls: false,
        plugins: ['advlist anchor autolink code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
        toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],
        images_upload_handler: async function (blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          const { url } = await uploadImg(formData, { fileSize: blobInfo.blob().size })
          success(process.env.VUE_APP_BASE_API + '/file/resource/' + url)
        }
      },
      id: null
    }
  },
  mounted () {},
  methods: {
    async isShow (data, isEdit = false) {
      this.dialogVisible = true
      isEdit ? (this.title = '编辑积分规则') : (this.title = '新增积分规则')
      this.isEdit = isEdit
      await this.$nextTick()
      if (isEdit) {
        const formData = this.rulesInfo
        for (const key in formData) {
          formData[key] = data[key]
        }
        this.id = data.id
      }
    },
    close () {
      this.$refs.elForm.resetFields()
      this.dialogVisible = false
    },
    handelConfirm () {
      this.$refs.elForm.validate(async valid => {
        if (!valid) return
        this.isEdit ? (await jfgzUpdate({ ...this.rulesInfo, id: this.id }))
          : (await jfgzSave(this.rulesInfo))
        this.$notify.success({
          title: `完成${this.title}`
        })
        this.$emit('update:visible')
        this.close()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .box-card {
    margin-bottom: 10px;
    padding-right: 20px;
    width: 100%;
    padding-right: 20px;
  }

.footer {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
  padding-left: 80px;
  padding-right: 20px;
  .el-button {
    width: 100%;
  }
}
</style>
